<template>
    <div class="modify_pwd_form_container">
        <el-form :model="modifyForm" status-icon :rules="rules" ref="modifyForm" label-width="100px"
                 class="demo-ruleForm" style="padding-top: 18px;">
            <el-form-item label="账号" prop="loginId">
                <el-input v-model="modifyForm.login_id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="当前密码" prop="password">
                <el-input type="password" v-model="modifyForm.password" autocomplete="new-password"
                          show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="modifyForm.newPassword" autocomplete="new-password"
                          show-password></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="checkPass">
                <el-input type="password" v-model="modifyForm.checkPass" autocomplete="new-password"
                          show-password></el-input>
            </el-form-item>
            <el-form-item v-if="showSubmit">
                <slot name="submit"/>
                <el-button type="primary" @click="confirm()">确认修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import md5 from 'js-md5';

export default {
    name: "ModifyPwdForm",
    props: {
        data: {
            type: Object,
            default: null,
        },
        showSubmit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        const _this = this;
        const validatePass = (rule, value, callback) => {
            if (_this.$utils.isNotEmpty(value)) {
                if (_this.$utils.isNotEmpty(_this.modifyForm.checkPass)) {
                    this.$refs.modifyForm.validateField('checkPass');
                }
                callback();
            } else {
                callback(new Error('请输入新密码'));
            }
        };
        const validatePass2 = (rule, value, callback) => {
            if (_this.$utils.isNotEmpty(value)) {
                if (value !== _this.modifyForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            } else {
                callback(new Error('请输入确认新密码'));
            }
        };
        return {
            modifyForm: {},
            rules: {
                password: [{required: true, message: '请输入当前密码', trigger: 'blur'}],
                newPassword: [{required: true, validator: validatePass, trigger: 'blur'}],
                checkPass: [{required: true, validator: validatePass2, trigger: 'blur'}],
            },
        };
    },
    watch: {
        data: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (_this.data) {
                _this.modifyForm = {
                    login_id: _this.data.login_id,
                    sid: _this.data.sid,
                };
                return;
            }
            let userInfo = _this.$utils.getSessionStorage(_this.$store.state.storageName);
            _this.modifyForm = {
                login_id: userInfo.login_id,
                sid: userInfo.sid
            };
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('modifyForm');
            if (valid) {
                let subData = $.extend({}, _this.modifyForm);
                subData.password = md5(subData.password);
                subData.newPassword = md5(subData.newPassword);
                const headers = {};
                if (_this.data) {
                    headers.token = _this.data.accessToken.token;
                }
                return _this.fetchData(_this.$api.API_ChangePwd, subData, true, _this.data === null, headers).then(() => {
                    _this.$message.success('修改成功！');
                    _this.$utils.logout();
                    _this.$router.push('/login');
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>


<style lang="less" rel="stylesheet/less">
.modify_pwd_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
